<template>
	<div class="systemBlock">
		<div class="systemBlock-header">
			<div
				:class="{
					'systemBlock-header-btn': true,
					'systemBlock-header-btn_active': activeNav === item.component
				}"
				v-for="(item, index) in sysNavList"
				:key="index"
				@click="toggleSys(item)"
			>
				{{ item.label }}
			</div>
		</div>
		<div class="systemBlock-content">
      <component :is="activeNav"></component>
    </div>
	</div>
</template>
<script>
import powerSystem from './powerSystem.vue';
import distributionSystem from './distributionSystem.vue';
import propulsionSystem from './propulsionSystem.vue';
export default {
	name: 'systemBlock',
  components: { powerSystem, distributionSystem, propulsionSystem },
	data() {
		return {
			sysNavList: [{ label: '电源系统', component: 'powerSystem' }, { label: '配电系统', component: 'distributionSystem' }, { label: '推进系统', component: 'propulsionSystem' }],
			activeNav: 'powerSystem'
		};
	},
	methods: {
		// 系统切换
		toggleSys(item) {
			this.activeNav = item.component;
		}
	},
	mounted() {
		// console.log(this.$refs.systemBlock);
	}
};
</script>
<style lang="scss" scoped>
.systemBlock {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	color: #ffffff;
	font-size: 14px;
	box-sizing: border-box;
	> div {
		box-sizing: border-box;
	}
	&-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 1px;
		margin: 8px 0 16px 0;
		&-btn {
			width: 109px;
			height: 29px;
			padding:0;
			background: #ffffff;
			color: #000000;
			text-align: center;
			line-height: 29px;
			font-weight: 500;
			cursor: pointer;
			&_active {
				background: #4981e6;
				color: #ffffff;
			}
		}
	}
	&-content {
		flex: 1;
	}
}
</style>
